<template>
  <view class="k-tabbar">
    <view class="tabbar-content">
      <view class="content-box" v-for="(item, index) in tabbarList" :key="index" @click="switchTabs(index, item)">
        <view class="content-item" :class="[ item.extrude ? 'extrude': '']">
          <view class="item_icon" v-if="item.extrude">
          </view>
		  <view class="item_text" v-if="item.extrude" :class="currentTabIndex == 2 ? 'red': ''">{{item.title}}</view>
		 
          <view class="item-list" v-if="!item.extrude">
            <view class="list-icon" :class="['icon-' + item.image, currentTabIndex == index ? 'active' : '']">
              <image :src=" '../../static/tabbar/' + (currentTabIndex != index ? item.image : item.image + '-active') + '.png'" mode=""></image>
            </view>
            <view class="list-title" :class="['title-' + item.image, currentTabIndex == index ? 'active' : '']">{{item.title}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: [Number, String],
      default: 0,
    },
    tabbarList: {
      type: Array,
      default: () => [
        {
          path: `/pages/index/index`,
          image: `index`,
          title: `首页`,
        },
        {
          path: `/pages/buy/buy`,
          image: `buy`,
          title: `买号`,
        },
        {
          path: `/pages/sell/sell`,
          title: `卖号`,
          extrude: true,
        },
        {
          path: `/pages/message/message`,
          image: `message`,
          title: `消息`,
        },
        {
          path: `/pages/my/my`,
          image: `my`,
          title: `我的`,
        },
      ],
    },
  },
  data() {
    return {
      currentTabIndex: this.current,
    }
  },
  created() {
    try {
      let pages = getCurrentPages() //获取页面栈数组
      let page = pages[pages.length - 1] //获取当前页面对象
      let route = page.route //获取当前页面路由
      this.selectRoute(route)
    } catch (err) {
      console.log(err)
    }
  },
  mounted() {
    //隐藏原生tab
    uni.hideTabBar()
  },
  methods: {
    // 筛选当前页面
    selectRoute(currentPath) {
      currentPath =
        currentPath.substr(0, 1) == '/' ? currentPath : '/' + currentPath

      this.tabbarList.map((item, index) => {
        if (item.path == currentPath) {
          this.currentTabIndex = index
        }
      })
    },
    // 点击tabbar
    switchTabs(index, item) {
      console.log(1111)
      if (item.path) {
        uni.switchTab({
          url: item.path,
        })
      } else {
        this.currentTabIndex = index
        this.$emit('click', index)
      }
    },
  },
}
</script>

<style lang="scss" scoped>

.k-tabbar {
border-top: 1px solid #F3F3F3;
  width: 100%;
  max-width: 430px;
  height: 166rpx;
  background: #fff;
  // box-shadow: 10px 4px 6px rgba(0, 0, 0, 0.95);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 99999;

  &.liu {
    background: #ffffff;

    .content-box {
      flex: 1;
    }
  }

  > .tabbar-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .content-box {
      text-align: center;
	  flex: 1;

      > .content-item {
		>.item_icon {
			margin-top: -70rpx;
			width: 116rpx;
			height: 84rpx;
		}
		.item_text {
			&.red {
				color: #FF6726;
			}
			font-size: 24rpx;
			margin-top: 10rpx;
			color: #9c9c9c;
		}
        &.extrude {
          position: relative;
          width: 116rpx;
          height: 84rpx;
          background: url(../../static/tabbar/sell.png) no-repeat;
          background-size: 116rpx 84rpx;
          margin: auto;
          top: 0;
          right: 10rpx;
        }

        > .item-list {
          height: 166rpx;
          font-size: 24rpx;
		
          overflow: hidden;

          > .list-icon {
            margin: 40rpx auto 0;
			&.active {
				margin: 14rpx auto 2rpx;
				width: 72rpx!important;
				height: 72rpx!important;
			}
            &.icon-index {
              width: 48rpx;
              height: 48rpx;
            }

            &.icon-buy {
              width: 48rpx;
              height: 48rpx;
            }

            &.icon-message {
              width: 48rpx;
              height: 48rpx;
            }

            &.icon-my {
              width: 48rpx;
              height: 48rpx;
            }

            > image {
              width: 100%;
              height: 100%;
            }
          }

          > .list-title {
            &.active {
              color: #FF6726 !important;
            }

            color: #9c9c9c;
            display: inline-block;

            &.title-index {
              margin-top: 10rpx;
            }

            &.title-buy {
              margin-top: 8rpx;
            }

            &.title-message {
              margin-top: 8rpx;
            }

            &.title-my {
              margin-top: 10rpx;
            }

            > image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
